<script setup lang="ts">
import { onMounted, ref } from 'vue'

import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";

const input=ref()

const isShow=ref(false)

const msg=ref("")

const block=ref<SlideVerifyInstance>()

 const  onSuccess=(input:string)=>{
                msg.value = '登录成功! '+"密码为:"+input
            }
  const  onFail=()=>{
               msg.value = '登录失败'
            }
  const  onRefresh=()=>{
                msg.value = ''
            }
 const  onAgain=()=> {
                console.log('检测到非人为操作的哦！');
                msg.value = 'try again';
                // 刷新
                block.value?.refresh();
            }

   const handleClick = () => {
      // 刷新
      block.value?.refresh();
      msg.value = "";
    };   

  
    const slide_show=ref(false)
        const onSubmit=()=>{

          //先让滑块加载出来,再过2s让它显示出来
          // block.value?.refresh();
          slide_show.value=true
          
          setTimeout(()=>{

            isShow.value=true
  
          },1000)
             
              
        }   
        
    
</script>

<template>
 <el-input v-model="input" placeholder="Please input" /><br/>
 <el-button type="success" @click="onSubmit()" round>登录</el-button>
 <!-- 遮罩 -->
 <div class="mask" v-if="isShow" >
  <!-- 滑块 -->
     <div class="slider" >
      <slide-verify  v-if="slide_show"
    class="silde_box"
      ref="block"
      slider-text="向右滑动"
      accuracy="1"
      @again="onAgain"
      @success="onSuccess(input)"
      @fail="onFail"
      @refresh="onRefresh"
    ></slide-verify>

    <!-- <button class="btn" @click="handleClick">在父组件可以点我刷新哦</button> -->
<div>{{msg}}</div>
     </div>
  </div>
</template>

<style scoped>
   .mask{
       position: fixed;
       left: 0%;
       top: 0%;
       width: 100%;
       height: 100%;
       z-index:100;
       overflow: hidden;
       background-color:rgba(0, 0, 0, 0.4)
   }
   .slider{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: white;
   }
   
</style>
